<template>
  <div class="signUpSuccess">
    <div class="signUpSuccess-nav">
      <p>恭喜您，签约成功</p>
      <p v-if="personType === 'landlord'">温馨提示：只有租客支付了租金才能交房哦</p>
      <p v-if="personType === 'renter'">温馨提示：您现在可以付款了</p>
      <p class="countdown">({{mill}})后将进入个人中心</p>

    </div>
    <div class="signUpSuccess-button" v-if="isWeixinBrowser">
      <!-- <x-button type="primary" link="/myOrderForRenter">房租订单</x-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'signUpSuccess',
  computed: {
    isWeixinBrowser () {
      var ua = window.navigator.userAgent.toLowerCase()
      return /micromessenger/.test(ua)
    }
  },
  data () {
    return {
      personType: 'renter', // 租客
      mill: 3
    }
  },
  methods: {
    cutDown () {
      setTimeout(() => {
        if (this.mill === 0) {
          this.$router.replace({ path: '/user' })
        } else {
          this.mill = this.mill - 1
          this.cutDown()
        }
      }, 1000)
    }
  },
  mounted () {
    this.cutDown()
  },
  created () {
    this.personType = this.$route.query.personType || 'renter'
  }
}
</script>

<style lang="less" scoped>
  .signUpSuccess{
    .countdown {
      text-align: center;
      margin-top: 20px;
      font-size: 16px;
      color: green;
    }
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    .signUpSuccess-nav {
      width: 100%;
      position: fixed;
      top: 34%;
      left: 0;
      p {
        text-align: center;
      }
      p:nth-of-type(1) {
        font-size: 21px;
      }
      p:nth-of-type(2) {
        padding-top:10px;
        font-size: 15px;
        color: #666;
      }
    }
    .signUpSuccess-button {
      position: fixed;
      left: 15px;
      right: 15px;
      bottom: 4%;
    }
  }
</style>
